<template>
  <div class="swiper-container">
    <Swiper
      :loop="true"
      :speed="500"
      :slides-per-view="4"
      :space-between="30"
      :autoplay="{ delay: 2500, pauseOnMouseEnter: true }"
      :pagination="{ clickable: true }"
      :navigation="false"
      :modules="[Autoplay, Pagination, Navigation]"
      :breakpoints="{
        320: { slidesPerView: 1 },
        768: { slidesPerView: 2 },
        1024: { slidesPerView: 3 }
      }"
    >
      <SwiperSlide v-for="(item, index) in slides" :key="index">
        <div class="slide-content">{{ item }}</div>
      </SwiperSlide>

      <!-- 自定义导航按钮 -->
      <div class="custom-nav">
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </Swiper>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';

// 必须导入所有相关样式
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import { ref } from 'vue';

const slides = ref([
  'Slide 1',
  'Slide 2',
  'Slide 3',
  'Slide 4',
  'Slide 5',
]);
</script>

<style>
.slide-content {
  height: 266px;
  background: #e6e4e4;
}
/* 分页点样式 */
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(0,0,0,0.3);
}

/* 导航按钮样式 */
.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 24px;
  color: #333;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}
</style>